<!--  -->

<style lang='scss' type='stylesheet/scss' scoped>
@import "@/assets/scss/mixin.scss";
.login-warpper {
  font-size: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  .login-nav {
    width: 100%;
    height: $navHeight;
    background: black;
  }
  .login-content {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eaeaea;
    .login-box {
      padding: 30px 30px;
      background: white;
      .login-title {
        font-size: 16px;
        color: black;
        font-weight: bold;
        display: block;
        text-align: center;
        margin-bottom: 30px;
      }
      .login-input {
        width: 300px;
        display: block;
      }
      .login-input + .login-input {
        margin-top: 16px;
      }
      .login-forgot {
        font-size: 12px;
        color: #707070;
        text-decoration: underline;
        text-align: right;
        margin-top: 8px;
        cursor: pointer;
        &:hover {
          color: lightblue;
        }
      }
      .login-button {
        margin-top: 30px;
      }
    }
  }
}
</style>

<template>
  <div class="login-warpper">
    <div class="login-nav"></div>
    <div class="login-content">
      <div class="login-box">
        <div class="login-title">登录</div>
        <input type="text"
               placeholder="USER NAME"
               v-model="loginForm.uname"
               class="p-normal-input login-input">
        <input type="password"
               v-model="loginForm.password"
               @keydown.prevent.13="handlerLogin"
               placeholder="PASSWORD"
               class="p-normal-input login-input">
        <!-- <div class="login-forgot">Forgot Password</div> -->
        <div class="login-button p-normal-button"
             @click="handlerLogin">登录</div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import { mapGetters } from "vuex";
import axios from "axios";
export default {
  computed: {
    ...mapGetters(["tokens", "users"])
  },
  data() {
    return {
      loginForm: {
        uname: "",
        password: ""
      }
    };
  },
  methods: {
    // 处理登录
    async handlerLogin() {
      if (this.validateLogin()) {
        try {
          let res = await this.$store.dispatch("user/login", this.loginForm);

          this.$router.push("/");
        } catch (error) {
          console.log(error);
        }
      }
    },
    // 验证登录表单
    validateLogin() {
      if (!this.loginForm.uname.trim()) {
        this.$notify({
          title: "警告",
          message: "请输入用户名",
          type: "warning"
        });
        return false;
      }

      if (!this.loginForm.password.trim()) {
        this.$notify({
          title: "警告",
          message: "请输入密码",
          type: "warning"
        });
        return false;
      }

      return true;
    }
  }
};
</script>
